<template>
  <div class="">
    <my-input v-model="keyword" @keydown.enter="search"></my-input>
    <van-row>
      <van-col span="6">
        <van-sidebar v-model="active">
          <van-sidebar-item
            v-for="item in cate.data"
            :key="item.id"
            :title="item.name"
            @click="change(item.id)"
          />
          <!-- 拿到导航的数据 -->
        </van-sidebar>
      </van-col>
      <van-col span="18">
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in result"
            :key="item.id"
            :icon="item.icon"
            :text="item.name"
            @click="$router.push('/list/' + item.id)"
          />
        </van-grid>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import cate from "../../public/cate.json";
//引入json
import { getCate } from "../utils/yx";

import myInput from "../components/myInput.vue";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      active: 0,
      list: [],
      //全部数据
      result: [],
      //筛选过后的数据
      keyword: "",
      //搜索关键字
    });
    const change = (id) => {
      if (id == 0) {
        data.result = data.list;
        return false;
      }
      //如果筛选的全部 就展示所有的数据
      data.result = data.list.filter((item) => {
        return item.pid == id;
      });
    };
    //点击侧边导航筛选数据

    getCate().then((res) => {
      data.list = res.data;
      data.result = res.data;
    });
    //进入页面获取数据

    const search = () => {
      data.result = data.list.filter((item) => {
        return item.name.includes(data.keyword);
      });
    };
    //搜索

    return { ...toRefs(data), cate, change, search };
  },
  components: {
    myInput,
  },
};
</script>

<style lang="scss"></style>
